<template>
    <div>
        <breadcrumb :title="'分类管理'" :noBack="true"></breadcrumb>
        <div class="white-block sort" v-loading="loading">
            <el-row>
                <el-col :span="7">
                    <el-button type="primary" size="small" @click="addTree">新增</el-button>
                    <el-button class="primary" size="small" @click="editTree">编辑</el-button>
                    <el-button size="small" @click="removeTree">删除</el-button>
                    <div class="tree-view mt20">
                        <el-scrollbar wrap-class="list" view-class="view-box" ref="treeList"
                                      class="scroll-view" style="height: 100%">
                            <div class="tree">
                                <el-tree :data="data" :props="defaultProps" @node-click="checkChange"
                                         @node-expand="checkChange" @node-collapse="checkChange"
                                         :highlight-current="true" node-key="id" ref="tree"></el-tree>
                            </div>
                        </el-scrollbar>
                    </div>
                </el-col>
                <el-col :span="16" :offset="1">
                    <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns" class="mt20"
                                   ref="table">
                        <!--接受scope-->
                        <template slot="operation" slot-scope="scope">
                            <el-link type="primary" :underline="false" @click="openSort(scope.row.id)">修改分类</el-link>
                        </template>
                        <template slot="state" slot-scope="scope">
                            <span v-if="scope.row.state==1">上架</span>
                            <span v-else-if="scope.row.state==2" class="error">下架</span>
                        </template>
                    </table-example>
                    <page :data="pageData" v-if="pageData" class="mt20 page" @jumpPage="getList"></page>
                </el-col>
            </el-row>
        </div>
        <dialog-msk :show.sync="show" ref="dialog" @cancel="close" :title.sync="title">
            <div slot="footer" class="text-center">
                <span slot="footer">
                    <el-button type="primary" @click="save">确定</el-button>
                    <el-button @click="close">取消</el-button>
                </span>
            </div>
            <div>
                <el-form class="form-common" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="1rem">
                    <el-form-item label="分类名称" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </dialog-msk>
        <dialog-msk :show.sync="showSort" :title.sync="sortTitle" ref="dialog1" @cancel="closeSort">
            <div slot="footer" class="text-center">
                <el-button type="primary" @click="saveSort">确定</el-button>
                <el-button @click="closeSort">取消</el-button>
            </div>
            <div>
                <el-form class="form-common" :model="ruleForm1" :rules="rules1" ref="ruleForm1" label-width="1rem">
                    <el-form-item label="选择分类" prop="sort">
                        <!--<el-input v-model="ruleForm.sort"></el-input>-->
                        <el-select v-model="ruleForm1.sort" placeholder="请选择" class="select">
                            <!--<el-option-->
                            <!--v-for="item in options"-->
                            <!--:key="item.value"-->
                            <!--:label="item.label"-->
                            <!--:value="item.value">-->
                            <!--</el-option>-->
                            <el-option-group
                                v-for="group in data"
                                :key="group.categoryName"
                                :label="group.categoryName">
                                <el-option
                                    v-for="item in group.children"
                                    :key="item.id"
                                    :label="item.categoryName"
                                    :value="item.id">
                                </el-option>
                            </el-option-group>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </dialog-msk>
    </div>
</template>

<script>
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'
    import dialogMsk from '../../components/dialog'

    export default {
        name: '',
        data() {
            return {
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'categoryName'
                },
                tableData: [],
                header: [
                    {
                        prop: 'name',
                        label: '应用名称',
                        minWidth: '20%',
                        align: 'center'
                    },
                    {
                        prop: 'state',
                        label: '当前状态',
                        minWidth: '20%',
                        align: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        minWidth: '20%',
                        align: 'center'
                    }
                ],
                slotColumns: ['operation', 'state'],
                pageData: null,
                loading: false,
                index: 1,
                currentTree: null,
                show: false,
                title: '',
                ruleForm: {
                    name: '',
                    type: 0
                },
                ruleForm1: {
                    sort: '',
                    id: null
                },
                rules: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'}
                    ]
                },
                rules1: {
                    sort: [
                        {required: true, message: '请选择分类', trigger: 'change'}
                    ]
                },
                showSort: false,
                sortTitle: '修改分类',
                update: null
            }
        },
        mounted() {
            this.getTree()
        },
        methods: {
            treeListUpdate() {
                let _this = this
                if (this.update) clearTimeout(this.update)
                this.update = setTimeout(() => {
                    _this.$refs.treeList.update()
                    _this.$method.updateView()
                }, 500)
            },
            getList(index, id) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/gsCategoryManage/getResListByCateId', {
                    id: this.currentTree.data.id,
                    current: this.index || 1,
                    size: 10
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.pageData = result.data
                        delete this.pageData['records']
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            getTree() {
                this.$http.get('/gsCategoryManage/getTree').then(result => {
                    if (result.success) {
                        this.data = result.data
                        this.treeListUpdate()
                    }
                })
            },
            checkChange(data, checked, indeterminate) {
                this.$refs.tree.setCurrentKey(data.id)
                this.currentTree = {
                    data,
                    checked,
                    indeterminate
                }
                if (checked.level > 1) {
                    this.getList(1)
                }
                this.treeListUpdate()
            },
            addTree() {
                if (this.currentTree && this.currentTree.checked.level > 1) {
                    this.$message.warning({
                        message: '请选择一级分类',
                        showClose: true
                    })
                } else {
                    this.title = '新增分类'
                    this.show = true
                    this.ruleForm.type = 0
                }
            },
            editTree() {
                if (this.currentTree) {
                    this.title = '修改分类'
                    this.show = true
                    this.ruleForm.type = 1
                    this.ruleForm.name = this.currentTree.data.categoryName
                } else {
                    this.$message.warning({
                        message: '请选择分类',
                        showClose: true
                    })
                }
            },
            removeTree() {
                if (this.currentTree) {
                    this.$http.post('/gsCategoryManage/delById', {
                        id: this.currentTree.data.id
                    }).then(result => {
                        if (result.success) {
                            this.$refs.tree.remove(this.currentTree.data)
                            this.currentTree = null
                            this.treeListUpdate()
                        }
                    })
                } else {
                    this.$message.warning({
                        message: '请选择分类',
                        showClose: true
                    })
                }
            },
            close() {
                this.$refs.ruleForm.resetFields()
                this.ruleForm.name = ''
                this.show = false
            },
            save() {
                let categoryName = this.ruleForm.name
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        let url = ''
                        if (this.ruleForm.type) {
                            url = '/gsCategoryManage/updateCategory'
                        } else {
                            url = '/gsCategoryManage/addCategory'
                        }
                        this.loading = true
                        this.$http.post(url, {
                            id: this.currentTree ? this.currentTree.data.id : 0,
                            // id: this.currentTree ? this.currentTree.data.id : 0,
                            categoryName: categoryName
                        }).then(result => {
                            this.close()
                            if (result.success) {
                                if (!this.ruleForm.type) {
                                    if (this.currentTree) {
                                        // if (!this.currentTree.data.children) this.currentTree.data.children = []
                                        // this.currentTree.data.children.push(result.data)
                                        this.$refs.tree.append(result.data, this.currentTree.data)
                                    } else {
                                        this.data.push(result.data)
                                    }
                                } else {
                                    this.currentTree.data.categoryName = categoryName
                                }
                                this.treeListUpdate()
                            }
                            this.loading = false
                        }).catch(() => {
                            this.loading = false
                        })
                    } else {
                        return false
                    }
                })
            },
            openSort(id) {
                this.showSort = true
                this.$nextTick(() => {
                    this.ruleForm1.sort = this.currentTree.data.id
                    this.ruleForm1.id = id
                })
            },
            closeSort() {
                this.showSort = false
                this.ruleForm1 = {
                    sort: '',
                    id: null
                }
            },
            saveSort() {
                this.$refs.ruleForm1.validate((valid) => {
                    if (valid) {
                        this.loading = true
                        this.$http.post('/gsCategoryManage/changeResCategory', {
                            categoryId: this.ruleForm1.sort,
                            resId: this.ruleForm1.id
                        }).then(result => {
                            if (result.success) {
                                this.closeSort()
                                this.getList()
                            }
                            this.loading = false
                        }).catch(() => {
                            this.loading = false
                        })
                    } else {
                        return false
                    }
                })
            }
        },
        components: {
            breadcrumb,
            tableExample,
            page,
            dialogMsk
        }
    }
</script>

<style scoped lang="less">
    .sort {
        padding: 1rem;
        min-height: 6rem;
    }

    .tree-view {
        height: 3.6rem;
        width: 100%;
    }
</style>
